<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"  >
            <van-swipe-item v-for="(pic,index) in imgs" :key="index" >
                <img width="100%" height="200" :src="pic.img">
            </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="3">
            <van-grid-item v-for="(payType,index) in payTypes" :key="index" :icon="payType.pic" :text="payType.name" @click="pay(index)"/>
        </van-grid>
    </div>
</template>
<script>
export default {
    data(){
        return{
            imgs:[],
            payTypes:[]
        }
    },
    methods:{
        pay(index){
           if(index==0){
                this.$router.push("/water")
            }
             if(index==1){
                this.$router.push("/electricity")
            
             }
             if(index==2){
                this.$router.push("/health")
            
             }
             if(index==3){
                this.$router.push("/car")
            }
            if(index==4){
                this.$router.push("/Internet")
            
             }
             if(index==5){
                this.$router.push("/insure")
            }
        }

    },
    created(){
        this.$axios.get("imgurl").then(res=>{
            if(res.data.code==1){
                this.imgs=res.data.data;
              }
              
        }),
        this.$axios.get("paytype").then(res=>{
            if(res.data.code==1){
                this.payTypes=res.data.data;
              }
        })
    }
    
}
</script>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 0px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
